<template>
  <list-container @resize="resize">
    <template slot="table">
      <Table
        :loading="asyncLoading"
        :size="size"
        row-key="id"
        :columns="tableColumns"
        :data="tableData"
        :height="tableHeight"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            :to="{
              name: 'classified-edit',
              query: { data: JSON.stringify(row) }
            }"
          >
            Edit
          </Button>
        </template>
      </Table>
    </template>
  </list-container>
</template>
<script>
/**
 * 消息列表管理
 */
import { InitListPage } from "@m/ListMixins";
import { classifiedList } from "@/api/classified.js";
export default {
  mixins: [InitListPage],

  data() {
    return {
      tableColumns: [
        {
          title: "Title",
          key: "label",
          tree: true
        },
        {
          title: "Sort",
          key: "sort"
        },
        {
          title: "Action",
          slot: "action",
          fixed: "right",
          width: 120
        }
      ],
      tableData: [],
      queryParams: {},
      asyncLoading: false
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.asyncLoading = true;
      classifiedList(this.queryParams)
        .then(({ data }) => {
          this.tableData = data.children;
        })
        .catch(() => {})
        .finally(() => {
          this.asyncLoading = false;
        });
    }
  }
};
</script>
